<template>
    <div class="destination">
        <div class="wrapper">
        <!-- 头部 star  -->
        <div class="head">
            <router-link tag="div" :to="'/search?back=/destination&cityCode='+this.cityCode" class="inp">
                <p>正佳科学馆亲子票仅158元！</p>
                <img :src="require('../assets/img/8-.png')" alt="">
            </router-link>
            <div class="city">
                <div class="city_type">
                    <ul>
                        <!-- <li class="con">周边</li> -->
                        <li @click="city(item.areaCode,item.name)" :class="[areaCode==item.areaCode?'con':'']" v-for="item in destinationlist" :key="item.areaCode">{{item.name}}</li>
                    </ul>
                </div>
                <div class="san">
                    <img :src="require('../assets/img/5i.png')" alt="">
                </div>
            </div>
        </div>
        <!-- 头部 end   -->

        <!-- 周末去哪儿 star  -->
        <div class="where" v-show="find">
            <h3>{{groupTitle}}</h3>
            <div class="where_more">
                <ul>
                    <li v-for="items in hotScenic" :key="items.id">
                        <div class="img">
                            <img :src="items.mudiPic" alt="">
                            <div class="bgword">{{items.scenicName}}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 周末去哪儿 end  -->

        <!-- 周边推荐城市 star -->
        <div class="recommend" v-show="find">
            <h3>{{name}}推荐城市</h3>
            <div class="recommend_more">
                <ul>
                    <li v-for="its in hotCity" :key="its.areaCode">
                      <p>{{its.cityName}}</p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 周边推荐城市 end -->
       
    </div>
    </div>
</template>

<script>
import { getJsondestinationData,getJsonWeekendtravelData} from "../api/comment.js";
export default {
  props: ["cityCode"],
    data() {
      return {
        destinationlist:null,
        Weekendtravel:null,
        hotCity:null,
        hotScenic:null,
        groupTitle:null,
        areaCode:0,
        name:"热门",
        find:true,
      }
    },
    methods:{
      city(code,name){
        this.areaCode=code
        this.name=name
      }
    },
    created(){
      getJsondestinationData().then((data)=>{
        // console.log(data.content);
        this.destinationlist=data.content
      })
      getJsonWeekendtravelData({areaCode:this.areaCode}).then((data)=>{
        console.log(data.content);
        this.Weekendtravel=data.content
        this.hotScenic=this.Weekendtravel.hotScenic[0].newScenicData
        this.groupTitle=this.Weekendtravel.hotScenic[0].groupTitle
        this.hotCity=this.Weekendtravel.hotCity
      })
      
    },
    watch:{
      "areaCode":function(){
        getJsonWeekendtravelData({areaCode:this.areaCode}).then((data)=>{
        console.log(data.content);
        this.Weekendtravel=data.content
        if(this.Weekendtravel=="{}"){
          this.find=false
        }else{
          this.find=true
          this.hotScenic=this.Weekendtravel.hotScenic[0].newScenicData
          this.groupTitle=this.Weekendtravel.hotScenic[0].groupTitle
          this.hotCity=this.Weekendtravel.hotCity

        }
        console.log(this.hotScenic);
        console.log(this.groupTitle);
      })
      }
    }
}
</script>

<style lang="scss" scoped>
.destination{
    .wrapper {
  min-width: 320px;
  max-width: 750px;
  margin: 0 auto;
  padding-bottom: 60px;
}
.head {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 10;
  background: url(../assets/img/mS1.png) no-repeat;
  background-size: 100% 168px;
  height: 168px;
  padding: 30px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  .inp {
    display: flex;
    background-color: rgba(0, 0, 0, 0.253);
    margin: 0 20px;
    font-size: 15px;
    height: 35px;
    line-height: 35px;
    border-radius: 17px;
    padding: 0 20px;
    color: rgb(222, 222, 222);
    justify-content: space-between;
    align-items: center;
    img {
      width: 15px;
      height: 15px;
    }
  }
  .city {
    display: flex;
    justify-content: space-between;
    margin: 0px 20px 0;
    .san {
      height: 46px;
      line-height: 46px;
      padding-left: 10px;
      display: flex;
      align-items: center;
      img {
        width: 10px;
      }
    }
  }
  .city_type {
    overflow-y: hidden;
     &::-webkit-scrollbar {
      display: none;
    }
    ul {
      display: flex;
      width: calc(27* 52px);
      li {
        color: #fff;
        font-weight: bold;
        width: 52px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        &.con {
          color: rgb(241, 123, 13);
          border-bottom: 3px solid rgb(241, 123, 13);
        }
      }
    }
  }
}
.where {
  margin: 0 15px;
}
.where h3,
.recommend h3 {
  text-align: center;
  line-height: 50px;
}
.where_more {
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 50%;
      margin-bottom: 10px;
      .img {
        position: relative;
        padding: 0 5px;
        height: 100px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          display: block;
        }
        .bgword {
          position: absolute;
          left: 5px;
          top: 0;
          right: 5px;
          bottom: 0;
          border-radius: 4px;
          background-color: rgba(0, 0, 0, 0.354);
          color: #fff;
          font-weight: bold;
          font-size: 24px;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
/* .recommend_more{} */
.recommend_more {
  ul {
    margin: 0 20px;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 25%;
      text-align: center;
      margin-bottom: 10px;
      p {
        border: 1px solid rgb(238, 226, 210);
        color: rgb(97, 84, 52);
        height: 36px;
        line-height: 36px;
        border-radius: 18px;
        margin: 0 5px;
      }
    }
  }
}

}
</style>